<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('百度ECharts')" />
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>折线图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="javascript:;">选项1</a>
                                </li>
                                <li><a href="javascript:;">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-line-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>柱状图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="javascript:;">选项1</a>
                                </li>
                                <li><a href="javascript:;">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <div class="echarts" id="echarts-bar-chart"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>饼状图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="javascript:;">选项1</a>
                                </li>
                                <li><a href="javascript:;">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-pie-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>雷达图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="javascript:;">选项1</a>
                                </li>
                                <li><a href="javascript:;">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-radar-chart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: echarts-js" />
    <script type="text/javascript">
        $(function () {
          /*<![CDATA[*/
          var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
          var lineoption = {
              title : {
                  text: '未来一周气温变化'
              },
              tooltip : {
                  trigger: 'axis'
              },
              legend: {
                  data:['最高气温','最低气温']
              },
              grid:{
                  x:40,
                  x2:40,
                  y2:24
              },
              calculable : true,
              xAxis : [
                  {
                      type : 'category',
                      boundaryGap : false,
                      data : ['周一','周二','周三','周四','周五','周六','周日']
                  }
              ],
              yAxis : [
                  {
                      type : 'value',
                      axisLabel : {
                          formatter: '{value} °C'
                      }
                  }
              ],
              series : [
                  {
                      name:'最高气温',
                      type:'line',
                      data:[11, 11, 15, 13, 12, 13, 10],
                      markPoint : {
                          data : [
                              {type : 'max', name: '最大值'},
                              {type : 'min', name: '最小值'}
                          ]
                      },
                      markLine : {
                          data : [
                              {type : 'average', name: '平均值'}
                          ]
                      }
                  },
                  {
                      name:'最低气温',
                      type:'line',
                      data:[1, -2, 2, 5, 3, 2, 0],
                      markPoint : {
                          data : [
                              {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                          ]
                      },
                      markLine : {
                          data : [
                              {type : 'average', name : '平均值'}
                          ]
                      }
                  }
              ]
          };
          lineChart.setOption(lineoption);
          $(window).resize(lineChart.resize);

          var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
          var baroption = {
              title : {
                  text: '某地区蒸发量和降水量'
              },
              tooltip : {
                  trigger: 'axis'
              },
              legend: {
                  data:['蒸发量','降水量']
              },
              grid:{
                  x:30,
                  x2:40,
                  y2:24
              },
              calculable : true,
              xAxis : [
                  {
                      type : 'category',
                      data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                  }
              ],
              yAxis : [
                  {
                      type : 'value'
                  }
              ],
              series : [
                  {
                      name:'蒸发量',
                      type:'bar',
                      data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                      markPoint : {
                          data : [
                              {type : 'max', name: '最大值'},
                              {type : 'min', name: '最小值'}
                          ]
                      },
                      markLine : {
                          data : [
                              {type : 'average', name: '平均值'}
                          ]
                      }
                  },
                  {
                      name:'降水量',
                      type:'bar',
                      data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                      markPoint : {
                          data : [
                              {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                              {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                          ]
                      },
                      markLine : {
                          data : [
                              {type : 'average', name : '平均值'}
                          ]
                      }
                  }
              ]
          };
          barChart.setOption(baroption);

          window.onresize = barChart.resize;


          var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));


            // 获取后端传递的数据
            const categories = [];
            const dataCountByCategory = [[${dataCountByCategory}]];

            // 将 List<Map<String, Integer>> 转换成 ECharts 饼图需要的格式 [[${dataCountByCategory}]];
            const pieData = [];

            for (let i = 0; i < dataCountByCategory.length; i++) {
                const item = dataCountByCategory[i];
                console.log(item);
                const key = Object.keys(item)[0];
                const name = item[Object.keys(item)[1]]
                categories.push(name);
                const value = item[key];
                pieData.push({
                    name: name,
                    value: value
                });
            }

console.log(categories);
            console.log(pieData);


          var pieOption = {
              title : {
                  text: '联系人分类数据汇总',
                  subtext: 'contact_info a JOIN contact_category c ON a.category_id = c.category_id',
                  x:'center'
              },
              tooltip : {
                  trigger: 'item',
                  formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              legend: {
                  orient : 'vertical',
                  x : 'left',
                  data: categories
              },
              calculable : true,
              series : [
                  {
                      name:'访问来源',
                      type:'pie',
                      radius : '55%',
                      center: ['50%', '60%'],
                      data: pieData
                  }
              ]
          };
          pieChart.setOption(pieOption);
          $(window).resize(pieChart.resize);

          var radarChart = echarts.init(document.getElementById("echarts-radar-chart"));
          var radarOption = {
              title : {
                  text: '预算 vs 开销',
                  subtext: '纯属虚构'
              },
              tooltip : {
                  trigger: 'axis'
              },
              legend: {
                  orient : 'vertical',
                  x : 'right',
                  y : 'bottom',
                  data:['预算分配','实际开销']
              },
              polar : [
                 {
                     indicator : [
                         { text: '销售', max: 6000},
                         { text: '管理', max: 16000},
                         { text: '信息技术', max: 30000},
                         { text: '客服', max: 38000},
                         { text: '研发', max: 52000},
                         { text: '市场', max: 25000}
                      ]
                  }
              ],
              calculable : true,
              series : [
                  {
                      name: '预算 vs 开销',
                      type: 'radar',
                      data : [
                          {
                              value : [4300, 10000, 28000, 35000, 50000, 19000],
                              name : '预算分配'
                          },
                           {
                              value : [5000, 14000, 28000, 31000, 42000, 21000],
                              name : '实际开销'
                          }
                      ]
                  }
              ]
          };

          radarChart.setOption(radarOption);
          $(window).resize(radarChart.resize);

       /*]]>*/

        });
    </script>
</body>
</html>